<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>临床营养诊疗系统 - 开具营养处方</title>
    <link href="bootstrap-3.4.1/css/bootstrap.css" rel="stylesheet">
    <!-- <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet"> -->
    <style>
		
        body {
            font-family: "Microsoft YaHei" !important;
            padding-top: 20px;
        }
        .header-bar {
            background: #f8f9fa;
            border-bottom: 1px solid #dee2e6;
            padding: 10px 15px;
            margin-bottom: 15px;
        }
        .patient-card {
            background-color: white;
            border-radius: 4px;
            border: 1px solid #dee2e6;
            padding: 15px;
            margin-bottom: 20px;
            position: relative;
        }
        .patient-info h3 {
            margin-top: 0;
            margin-bottom: 10px;
        }
        .info-item {
            margin-bottom: 8px;
        }
        .section-panel {
            background-color: white;
            border-radius: 4px;
            border: 1px solid #dee2e6;
            padding: 15px;
            margin-bottom: 20px;
        }
        .step-label {
            color: #d9534f;
            font-weight: bold;
            font-size: 16px;
            margin-bottom: 15px;
            padding-bottom: 5px;
            border-bottom: 1px solid #eee;
        }
        .product-table th {
            background-color: #f8f9fa;
            color: #495057;
            font-weight: 600;
            font-size: 14px;
        }
        .product-table td {
            vertical-align: middle;
        }
        .product-table .btn {
            padding: 4px 10px;
            font-size: 12px;
        }
        .btn-preset {
            background-color: #5bc0de;
            color: white;
            border: none;
            padding: 6px 12px;
        }
        .btn-preset:hover {
            background-color: #46b8da;
        }
        .nutrition-box {
            background-color: #e9ecef;
            border-radius: 4px;
            padding: 15px;
            margin-top: 15px;
            font-size: 13px;
        }
        .nutrition-box h4 {
            margin-top: 0;
            margin-bottom: 10px;
            font-size: 14px;
        }
        .ingredient-list {
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 4px;
            margin-top: 15px;
            font-size: 13px;
            line-height: 1.6;
        }
        .ingredient-list p {
            margin: 0 0 5px 0;
        }
        .usage-input-group {
            margin-bottom: 15px;
        }
        .form-control-label {
            font-weight: normal;
            /* color: #6c757d; */
            margin-bottom: 5px;
            font-size: 14px;
        }
        .form-control-sm {
            padding: 6px 8px;
            font-size: 13px;
        }
        .intervention-item {
            margin-bottom: 10px;
        }
        .editor-toolbar {
            margin-bottom: 10px;
        }
        .editor-toolbar .btn {
            padding: 3px 8px;
            font-size: 13px;
            margin-right: 5px;
            margin-bottom: 5px;
        }
        .delivery-options {
            margin-bottom: 15px;
        }
        .divider {
            border-top: 1px dashed #dee2e6;
            margin: 15px 0;
        }
        .total-price {
            font-size: 16px;
            font-weight: bold;
            color: #d9534f;
        }
        .product-card {
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 10px;
            margin-bottom: 10px;
            background-color: white;
        }
        .btn-action {
            background-color: #337ab7;
            color: white;
            border: none;
        }
        .btn-action:hover {
            background-color: #286090;
        }
        .text-light {
            color: #6c757d;
        }
        .text-emphasis {
            color: #212529;
            /* font-weight: bold; */
        }
        .summary-panel {
            background-color: white;
            border-radius: 4px;
            border: 1px solid #dee2e6;
            padding: 15px;
            margin-bottom: 20px;
        }
        .btn-top-action {
            margin-left: 10px;
            padding: 6px 12px;
        }
		.info-item {
			display: flex;
		}
    </style>
</head>
<body>
    <div class="container">
        <!-- 患者信息卡片 -->
        <div class="row">
            <div class="col-md-12">
                <div class="patient-card">
                    <div class="row">
                        <div class="col-md-6 patient-info">
                            <h3><div class="step-label">小龙女，18岁，女</div></h3>
							
                            <div class="row">
                                <div class="col-sm-4">
                                    <div class="info-item">
                                        <div class="form-control-label">身高(cm)：</div>
                                        <div class="text-emphasis">148.5</div>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="info-item">
                                        <div class="form-control-label">体重(kg)：</div>
                                        <div class="text-emphasis">50.8</div>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="info-item">
                                        <div class="form-control-label">BMI：</div>
                                        <div class="text-emphasis">23.0 <span class="text-success">正常</span></div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-4">
                                    <div class="info-item">
                                        <div class="form-control-label">系数类型：</div>
                                        <div class="text-emphasis">轻体力活动</div>
                                    </div>
                                </div>
                                <div class="col-sm-8">
                                    <div class="info-item">
                                        <div class="form-control-label">产品领取库房：</div>
                                        <div class="text-emphasis">成品药房</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <!-- 左侧内容区域 -->
            <div class="col-md-8">
                <!-- 产品选择区域 -->
                <div class="section-panel">
                    <div class="step-label">第1步，选择营养产品</div>
                    <div class="table-responsive">
                        <table class="table product-table table-striped table-bordered">
                            <thead>
                                <tr>
                                    <th width="5%">操作</th>
                                    <th width="40%">产品全称</th>
                                    <th width="15%">规格</th>
                                    <th width="10%">天数</th>
                                    <th width="10%">数量</th>
                                    <th width="15%">单价</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <button class="btn btn-primary btn-xs">添加</button>
                                    </td>
                                    <td>
                                        君蓓全特殊医学用途全营养配方食品
                                    </td>
                                    <td>50g×10袋/盒</td>
                                    <td>1天</td>
                                    <td>1盒</td>
                                    <td class="text-emphasis">¥398.00</td>
                                </tr>
                                <tr>
                                    <td>
                                        <button class="btn btn-primary btn-sm">添加</button>
                                    </td>
                                    <td>
                                        君蓓全特殊医学用途全营养配方
                                    </td>
                                    <td>10g×30条/盒</td>
                                    <td>1天</td>
                                    <td>1盒</td>
                                    <td class="text-emphasis">¥327.00</td>
                                </tr>
								
								<tr>
									<td colspan="6" style="text-align: center;">
										<nav aria-label="Page navigation">
										  <ul class="pagination">
										    <li>
										      <a href="#" aria-label="Previous">
										        <span aria-hidden="true">&laquo;</span>
										      </a>
										    </li>
										    <li><a href="#">1</a></li>
										    <li><a href="#">2</a></li>
										    <li><a href="#">3</a></li>
										    <li><a href="#">4</a></li>
										    <li><a href="#">5</a></li>
										    <li>
										      <a href="#" aria-label="Next">
										        <span aria-hidden="true">&raquo;</span>
										      </a>
										    </li>
										  </ul>
										</nav>
									</td>
								</tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <!-- 频次用量区域 -->
                <div class="section-panel">
                    <div class="step-label">第2步，选择频次，填写用量</div>
                    <div class="row usage-input-group">
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label class="form-control-label">频次：</label>
                                <select class="form-control form-control-sm">
                                    <option>一天2次</option>
                                    <option>一天1次</option>
                                    <option>一天3次</option>
                                    <option>按需服用</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label class="form-control-label">用量：每次</label>
                                <div class="input-group" style="width: 150px;">
                                    <input type="text" class="form-control form-control-sm" value="100">
                                    <span class="input-group-addon" style="font-size: 13px;">克</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
					<!--
                    <div class="row">
                        <div class="col-sm-8">
                            <div class="nutrition-box">
                                <div class="pull-right">
                                    <button class="btn btn-default btn-xs">全部计算</button>
                                    <button class="btn btn-default btn-xs">详细</button>
                                </div>
                                <h4>一日营养素计算</h4>
                                <div class="row">
                                    <div class="col-xs-4">
                                        <p>能量: <span class="text-emphasis">1200 kcal</span></p>
                                        <p>蛋白质: <span class="text-emphasis">45g</span></p>
                                    </div>
                                    <div class="col-xs-4">
                                        <p>脂肪: <span class="text-emphasis">35g</span></p>
                                        <p>碳水化合物: <span class="text-emphasis">180g</span></p>
                                    </div>
                                    <div class="col-xs-4">
                                        <p>膳食纤维: <span class="text-emphasis">25g</span></p>
                                        <p>水分: <span class="text-emphasis">1800ml</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="text-center" style="margin-top: 30px;">
                                <span class="text-light">填写后会自动计算营养素</span>
                            </div>
                        </div>
                    </div>
					-->
                </div>
                
                <!-- 开具原因区域 -->
                <div class="section-panel">
                    <div class="step-label">第3步，填写开具原因</div>
                    <div class="form-group">
                        <textarea class="form-control" rows="3">营养风险筛查为3分，存在营养风险，需要营养治疗</textarea>
                    </div>
                </div>
                
                <!-- 干预途径区域 -->
                <div class="section-panel">
                    <div class="step-label">第4步，选择干预途径，可设置更详细的用法</div>
                    <div class="ingredient-list">
                        <p class="text-emphasis">第1天</p>
                        <p>07:00君蓓全特殊医学用途全营养配方食品100克+麦孚卡能麦芽糊精糖果饮品100毫升(100克)+大养堂菊苣益生菌粉10克(1条)+(60~70)℃水(200)ml</p>
                        <p>12:00君蓓全特殊医学用途全营养配方食品100克+麦孚卡能麦芽糊精糖果饮品100毫升(100克)+(60~70)℃水(200)ml</p>
                    </div>
                </div>
                
                <!-- 领取方式区域 -->
                <div class="section-panel">
                    <div class="step-label">第5步，选择患者的领取方式</div>
                    <div class="form-group delivery-options">
                        <label class="form-control-label">配送方式：</label>
                        <div>
                            <label class="radio-inline">
                                <input type="radio" name="delivery" checked> 配送科室
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="delivery"> 患者自提
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="delivery"> 需发快递
                            </label>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-control-label">备注：</label>
                        <textarea class="form-control" rows="3" placeholder="请填写给发放人员的注意事项，或需要快递给患者，请填写配送地址等。"></textarea>
                    </div>
                </div>
            </div>
            
            <!-- 右侧产品摘要区域 -->
            <div class="col-md-4">
                <div class="summary-panel">
                    <h4>已选择产品</h4>
                    <div class="divider"></div>
                    
                    <div class="product-card">
                        <div class="row">
                            <div class="col-xs-8">
                                <div class="text-emphasis">君蓓全特殊医学用途全营养配方食品</div>
                                <div class="text-light">50g×10袋/盒 × 1</div>
                            </div>
                            <div class="col-xs-4 text-right text-emphasis">
                                ¥398.00
                            </div>
                        </div>
                    </div>

                    
                    <div class="divider"></div>
                    
                    <div class="text-right" style="display: flex;">
                        <div class="form-control-label">合计金额：</div>
                        <div class="total-price">¥725.00</div>
                    </div>
                </div>
                
                <!-- 营养计算结果 -->
				<!--
                <div class="summary-panel">
                    <h4>一日营养素计算</h4>
                    <div class="nutrition-box">
                        <div class="row">
                            <div class="col-xs-6">
                                <p>能量: <span class="text-emphasis">1200 kcal</span></p>
                                <p>蛋白质: <span class="text-emphasis">45g</span></p>
                                <p>脂肪: <span class="text-emphasis">35g</span></p>
                            </div>
                            <div class="col-xs-6">
                                <p>碳水化合物: <span class="text-emphasis">180g</span></p>
                                <p>膳食纤维: <span class="text-emphasis">25g</span></p>
                                <p>水分: <span class="text-emphasis">1800ml</span></p>
                            </div>
                        </div>
                    </div>
                </div>
				-->
                
                <!-- 配方详情 -->
                <div class="summary-panel">
                    <h4>配方详情</h4>
                    <div class="ingredient-list">
                        <p>君蓓全特殊医学用途全营养配方食品100克+麦片+桃李味绵柔果糖100毫升+大养堂菊苣益生菌粉10克(1条)+(60~70)℃水(200)ml</p>
                        <p>君蓓全特殊医学用途全营养配方食品100克+麦孚卡能麦芽糊精糖果饮品100毫升(100克)+(60~70)℃水(200)ml</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部按钮 -->
        <div class="row text-center" style="margin-top: 20px; margin-bottom: 30px;">
            <button class="btn btn-primary">返回</button>
            <button class="btn btn-success">确认下达</button>
        </div>
    </div>

    <!-- jQuery and Bootstrap JS -->
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
    <script src="bootstrap-3.4.1/js/bootstrap.js"></script>
    <script>
        $(document).ready(function() {
            // 添加产品按钮事件
            $(".product-table .btn").click(function() {
                var row = $(this).closest('tr');
                var productName = row.find('td:eq(1)').text().trim();
                var specification = row.find('td:eq(2)').text().trim();
                var quantity = row.find('td:eq(4)').text().trim();
                var price = row.find('td:eq(5)').text().trim();
                
                // 在右侧已选产品区域添加产品
                var newProduct = $('.product-card:first').clone();
                newProduct.find('.text-emphasis:first').text(productName);
                newProduct.find('.text-light').text(specification + " × " + quantity);
                newProduct.find('.text-right .text-emphasis').text(price);
                
                newProduct.insertBefore($('.summary-panel .divider'));
                
                // 计算总价并更新
                calculateTotal();
            });
            
            // 计算总价函数
            function calculateTotal() {
                var total = 0;
                $('.product-card').each(function() {
                    var priceText = $(this).find('.text-right .text-emphasis').text();
                    var price = parseFloat(priceText.replace('¥', '').replace(',', ''));
                    if (!isNaN(price)) {
                        total += price;
                    }
                });
                
                $('.total-price').text('¥' + total.toFixed(2));
            }
        });
    </script>
</body>
</html>